<template>
  <div id="map"></div>
  <div class="open" @click="openMaplist" ref="open">
    <img src="../../../assets/images/map-open.png" />
  </div>
  <div class="zhe df" ref="zhe">
    <ul class="map-box" ref="mapBox">
      <li class="map-list">
        <i class="iconfont icon-huojingzhan1" style="color: #6eecee"></i>
        队站
      </li>
      <li class="map-list">
        <i class="iconfont icon-wuxiandianbo" style="color: #6eecee"></i>
        物联网设备
      </li>
      <li class="map-list"><i class="iconfont icon-xiaofangshuan" style="color: #6eecee"></i>消火栓</li>
      <li class="map-list" @click="setMark">
        <i class="iconfont icon-weixingxiaofangzhan" style="color: #6eecee"></i>微型消防站
      </li>
      <li class="map-list"><i class="iconfont icon-jiankong3" style="color: #6eecee"></i>疏散通道监控</li>
      <li class="map-list"><i class="iconfont icon-jiankong3" style="color: #6eecee"></i>消防控制室监控</li>
      <li class="map-list" @click="getLocation()">
        <i class="iconfont icon-position" style="color: #6eecee"></i>我的位置
      </li>
      <li class="map-list"><i class="iconfont icon-a-3yewufuwuzhongxin" style="color: #6eecee"></i>街道服务中心</li>
      <li class="map-list"><i class="iconfont icon-yingjiyuan" style="color: #6eecee"></i>火灾应急预案</li>
      <li class="map-list"><i class="iconfont icon-quanjingtu" style="color: #6eecee"></i>vr全景</li>
      <li class="map-list"><i class="iconfont icon-quanjingtu" style="color: #6eecee"></i>充电桩</li>
    </ul>
    <div class="close" @click="closeMaplist" ref="close">
      <img src="../../../assets/images/map-close.png" />
    </div>
  </div>
</template>
<script>
import { baiduMap } from './map'
import { defineComponent, onMounted, nextTick, ref } from 'vue'
import apis from '@/api/apis'
export default defineComponent({
  props: {
    // 传入需要定位的经纬度
    //纬度
    latitude: {
      type: Number,
      default: () => {
        return 30.663503
      }
    },
    //经度
    longitude: {
      type: Number,
      default: () => {
        return 104.072425
      }
    },
    label: { type: String, default: '在这里' },
    width: {
      type: Number,
      default: 740
    },
    height: {
      type: Number,
      default: 500
    }
  },
  onMounted() {
    // setMark()
  },
  setup(props, { emit }) {
    const map = ref(null)
    // const BMap = (window as any).BMap
    // 创建定位控件实例
    const getPosition = () => {
      console.log('获取当前位置中···')
      return new Promise(function (resolve, reject) {
        const geolocation = new BMap.Geolocation()

        geolocation.enableSDKLocation()
        geolocation.getCurrentPosition(
          function (res) {
            if (this.getStatus() === BMAP_STATUS_SUCCESS) {
              resolve({
                longitude: res.point.lng,
                latitude: res.point.lat
              })
            } else {
              reject(this.getStatus())
            }
          },
          { enableHighAccuracy: true }
        )
      })
      // emit('getLocation')
    }
    const getLocation = () => {
      getPosition()
        .then(function (res) {
          console.log(`经度：${res.longitude}；纬度：${res.latitude}`)
          props.longitude = res.longitude
          props.latitude = res.latitude
          // mapGet()
        })
        .catch(function (err) {
          console.error(`定位失败，错误码：${err}`)
          // 失败时的错误处理
        })
    }

    const mapGet = () => {
      baiduMap().then(async (mymap) => {
        // 创建地图实例
        map.value = new BMap.Map('map') // 创建地图实例
        console.log('BBBB', BMap)
        // let point = new BMap.Point(props.longitude, props.latitude) // 创建点坐标
        let point = new BMap.Point('103.873473', '36.054061') // 创建点坐标
        let content = `<div><div class="map-house-center"><i class="iconfont icon-position" style="color: red;font-size:1em"></i><label>
                        ${props.label}
                        </label>
                        </div></div>`
        let label = new BMap.Label(content, {
          // 创建文本标注
          position: point // 设置标注的地理位置
          // offset: window.BMapGL.Size(10, 20), // 设置标注的偏移量
        }) // 创建文本标注对象
        map.value.addOverlay(label) // 将标注添加到地图中
        label.setStyle({
          // 设置label的样式
          color: '#000',
          fontSize: '10px',
          border: '1px solid #fff',
          textAlign: 'center'
        })
        label.setStyle({ border: '0 solid red' })
        map.value.centerAndZoom(point, 15) //设置缩放级别 // 初始化地图，设置中心点坐标和地图级别
        map.value.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        map.value.addEventListener('click', function (e) {
          //   let a = JSON.parse(e)
          console.log('点击的经纬度：' + e.point.lng + ',' + e.point.lat) //
          emit('update:longitude', e.point.lng)
          emit('update:latitude', e.point.lat)
        })
      })
    }
    const setMark = () => {
      apis.get('unit/MiniFireStation/vicinityList').then((res) => {
        if (!res.data.length) {
          return
        }
        let markList = res.data
        var opts = {
          width: 200,
          height: 400,
          title: ''
        }

        let point = new BMap.Point(markList[0].latitude, markList[0].longitude)

        // map.value.openInfoWindow(infoWindow,point)
        markList.map((ret) => {
          let point = new BMap.Point(ret.latitude, ret.longitude)
          let marker = new BMap.Marker(point)
          map.value.addOverlay(marker)

          marker.addEventListener('click', function () {
            var infoWindow = new BMap.InfoWindow(
              `<div>消防站名称:${ret.station_name}</div><div>联系人:${ret.contacts}</div><div>电话:${ret.phone}</div><img src='${ret.picture}'></img>`,
              opts
            )
            map.value.openInfoWindow(infoWindow, point)
          })
        })
        map.value.centerAndZoom(point, 15)

        console.log(res, '<<<<<', map.value)
      })
    }
    onMounted(() => {
      nextTick(() => {
        mapGet()
      })
    })
    return { getLocation, setMark }
  },

  methods: {
    closeMaplist() {
      this.$refs.zhe.style.display = 'none'
      this.$refs.open.style.display = 'block'
    },
    openMaplist() {
      this.$refs.zhe.style.display = 'block'
      this.$refs.open.style.display = 'none'
    }
    // setMark (){
    //     this.$api.get('unit/MiniFireStation/vicinityList').then(res=>{
    //         console.log(res,"<<<<<",map)
    //     })
    // }
  }
})
</script>
<style lang="scss">
#map {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 1%;
}
.map-house-center {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  background-color: #f5a623;
  padding: 2px 10px;
  border-radius: 6px;
  color: #fff;
  text-align: center;
}
.zhe {
  width: 10%;
  height: 420px;
  // background-color: rgba(94, 104, 123, 0.8);
  position: absolute;
  top: 20px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 14px;
}
.map-list {
  padding: 10px 0;

  /* text-align: center; */
  cursor: pointer;
  padding-left: 10px;
  &:hover {
    background-color: #5e687b;
  }
}
.iconfont {
  padding-right: 5px;
  font-size: 16px;
}
.close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.open {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  display: none;
}
img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
